<template>
  <Affix>
    <div style="width: 100%; background-color: white">
      <div id="top">
        <div class="aa">
          <div style="height: 53px; margin-top: 10px"><img src="../assets/img/logo.png" alt="" style="height: 100%">
          </div>
          数字音乐运营管理系统
        </div>
        <div style="display: flex; justify-content: space-between">
          <div class="item">
            <router-link to="/home" class="co-black" :class="{'active': this.$route.path==='/home'}">首页</router-link>
          </div>
          <div class="item">
            <router-link to="/my_music" class="co-black" :class="{'active': this.$route.path==='/my_music'}">版权登记/我的音乐
            </router-link>
          </div>
          <div class="item">
            <router-link to="/transaction" class="co-black" :class="{'active': this.$route.path==='/transaction'}">版权交易
            </router-link>
          </div>
          <div class="item">
            <router-link to="/copyright_search" class="co-black"
                         :class="{'active': this.$route.path==='/copyright_search'}">版权查验
            </router-link>
          </div>
          <div class="item" v-if="!this.$store.state.isLogin" style="display: flex">
            <div>
              <div class="co-black" @click="openModal(0)">注册</div>
            </div>
            <div style="color: #505050; margin: 0 10px">|</div>
            <div>
              <div class="co-black" @click="openModal(1)">登录</div>
            </div>
          </div>
          <div class="item" v-else>
            <Dropdown>
              <router-link to="/personal_center" class="co-black" :class="{'active': this.$route.path==='/personal_center'}">
                个人中心
                <Icon type="ios-arrow-down"></Icon>
              </router-link>
              <DropdownMenu slot="list">
                <DropdownItem>
                  <router-link to="/personal">个人信息</router-link>
                </DropdownItem>
                <DropdownItem>
                  <router-link to="/my_music">我的音乐</router-link>
                </DropdownItem>
                <DropdownItem>
                  <router-link to="/cart">我的购物车</router-link>
                </DropdownItem>
                <DropdownItem>
                  <router-link to="/my_order">我的订单</router-link>
                </DropdownItem>
                <DropdownItem>
                  <router-link to="/tasks">每日任务</router-link>
                </DropdownItem>
                <div @click="logout">
                  <DropdownItem>退出登录</DropdownItem>
                </div>
              </DropdownMenu>
            </Dropdown>
          </div>
        </div>
      </div>
    </div>

    <Modal
      ref="modal"
      :styles="styles"
      v-model="modal"
      :footer-hide="true"
    >
      <login-register :page="this.choose" v-on:closeModal="closeModal"></login-register>
    </Modal>
  </Affix>
</template>

<script>
import LoginRegister from '@/views/LoginRegister'

export default {
  name: 'Top',
  components: {
    LoginRegister
  },
  data () {
    return {
      modal: false,
      choose: 'login',
      styles: {
        'background-color': 'white'
      }
    }
  },
  methods: {
    openModal (num) {
      if (num === 0) {
        this.choose = 'register'
      } else {
        this.choose = 'login'
      }
      this.modal = true
    },
    closeModal () {
      // console.log('test')
      this.modal = false
    },
    logout () {
      this.$store.commit('userStatus', {
        isLogin: false,
        userType: 0,
        accessToken: ''
      })
      this.$router.replace('/home')
      this.$Notice.info({
        title: '成功退出'
      })
    }
  }
}
</script>

<style scoped>
#top {
  width: 1000px;
  height: 73px;
  font-family: "Roboto Light", "Microsoft YaHei", serif;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
}

.active {
  color: rgba(235, 122, 103, 1);
}

.aa {
  height: 73px;
  line-height: 73px;
  color: rgba(235, 122, 103, 1);
  font-size: 18px;
  display: flex;
}

.item {
  height: 73px;
  line-height: 73px;
  margin: 0 30px;
  left: 862px;
  color: rgba(0, 0, 0, 1);
  font-size: 18px;
  font-family: "Roboto Light", "Microsoft YaHei", serif;
}
</style>
